<template>
  <div class="intent-mining-page">
    <div class="visible" :style="visibleStyle">
      <div class="close-btn">
        <a-icon class="btn-close" type="close" @click="closeInfoModal" />
      </div>
      <a-checkbox-group
        v-if="clickType === 'kpiTypeName'"
        v-model="kpiTypeCodeList"
        :options="indexTypeList"
      ></a-checkbox-group>
      <a-checkbox-group
        v-if="clickType === 'kpiCycle'"
        v-model="kpiCycleList"
        :options="dateTypeList"
      ></a-checkbox-group>
      <div class="release-time" v-if="clickType === 'releaseTime'">
        <div>
          每月：
          <a-select
            class="input-class"
            placeholder="请选择发布时间"
            allowClear
            :get-popup-container="getPopupContainer"
            v-model="everyMonth"
          >
            <a-select-option
              v-for="item in 31"
              :key="item"
              :value="item + '日'"
            >
              {{ item + "日" }}
            </a-select-option>
          </a-select>
        </div>
        <div>
          每日：
          <a-time-picker
            :get-popup-container="getPopupContainer"
            class="input-class"
            placeholder="请选择发布时间"
            format="HH:mm"
            value-format="HH:mm"
            v-model="everyDay"
          />
        </div>
      </div>
      <a-date-picker
        v-if="clickType === 'addDate'"
        format="YYYYMMDD"
        valueFormat="YYYYMMDD"
        v-model="addDate"
        placeholder="请选择上架时间"
        style="width: 280px"
      />
      <div class="reset">
        <div class="btn1 btn2" @click="resetValue">重置</div>
        <div class="btn1 btn3" type="primary" @click="confirmValue">确定</div>
      </div>
    </div>
    <div class="title">
      <div class="iconTip">指标管理</div>
    </div>
    <div class="search">
      <div class="head-title">
        <img :src="GaiLogo" alt="" />
        <span>指标概况</span>
      </div>
      <div class="head-top">
        <div class="item">
          <span>指标总数</span>
          <span class="num-total">{{ kpiTotal }}</span>
          <span>个</span>
          <img :src="LeftLogo" />
        </div>
        <div class="item">
          <span>近1个月上架</span>
          <span class="num-total">{{ releaseTotal }}</span>
          <span>个</span>
          <img :src="RightLogo" />
        </div>
      </div>
    </div>
    <div class="btn">
      <div class="left-tree">
        <div class="type-item select-item">
          <div class="head-title1">
            <img :src="TypeLogo" alt="" />
            <span>指标分类</span>
          </div>
          <div class="tree-content">
            <a-tree
              v-if="tableData && treeData.length > 0"
              :show-line="true"
              :tree-data="treeData"
              :defaultExpandAll="true"
              @select="onSelect"
            ></a-tree>
          </div>
        </div>
        <div class="date-item select-item">
          <div class="head-title2">
            <img :src="DateLogo" alt="" />
            <span>指标周期</span>
          </div>
          <div
            :class="kpiCycle === item.key ? 'date-list-selected' : 'date-list'"
            v-for="item in dateList"
            :key="item.key"
            :title="item.title"
            @click="clickLeftDate(item.key)"
          >
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="right-table">
        <a-input-search
          class="input-search"
          v-model.trim="searchName"
          placeholder="请输入指标编码或指标名称进行搜索"
          style="width: 350px"
          @search="onSearch"
        />
        <MyTable
          :data-source="tableData"
          :columns="columns"
          row-key="kpiCode"
          :slotName="['dateType']"
          :slotHeadName="slotHeadName"
          @clickHeadEmit="clickHeadEmit"
        >
          <template #dateType="scope">
            <span>
              {{ getkpiCycle(scope) }}
            </span>
          </template>
          <template #operation="scope">
            <span class="operate">
              <span class="operate-item" @click="previewFormOpen(scope)">
                查看详情
              </span>
            </span>
          </template>
        </MyTable>
        <div class="table-paging">
          <a-pagination
            :current="pageNo"
            :total="total"
            :show-total="(total) => `共有 ${total} 条`"
            :page-size-options="['15', '20', '30', '50']"
            :page-size="pageSize"
            show-quick-jumper
            show-size-changer
            @change="change"
            @showSizeChange="change"
          />
        </div>
      </div>
    </div>

    <a-modal
      v-model="previewVisible"
      :footer="null"
      title="查看指标详情"
      centered
      width="70%"
    >
      <PreviewModal :formData="previewForm" />
    </a-modal>
  </div>
</template>

<script setup>
import MyTable from "@/components/common/index-table.vue";
import PreviewModal from "@/components/common/preview-modal.vue";
import { onMounted, watch, ref } from "vue";
import { indexManagement } from "@/store/index-management";
import { storeToRefs } from "pinia";
import LeftLogo from "@/assets/img/left.png";
import RightLogo from "@/assets/img/right.png";
import GaiLogo from "@/assets/img/gai.png";
import TypeLogo from "@/assets/img/type.png";
import DateLogo from "@/assets/img/date.png";
const store = indexManagement();
const {
  kpiTotal,
  releaseTotal,
  treeData,
  dateList,
  columns,
  tableData,
  previewForm,
  selected,
  pageNo,
  pageSize,
  total,
  searchName,
  kpiCycle,
  kpiTypeCodeList,
  kpiCycleList,
  addDate,
  slotHeadName,
  backKpiTypeCodeList,
  backKpiCycleList,
  backAddDate,
  everyMonth,
  everyDay,
  backEveryMonth,
  backEveryDay,
} = storeToRefs(store);

const change = (page, pageSize1) => {
  pageNo.value = page;
  pageSize.value = pageSize1;
};
const { getTopDataApi, getLeftTreeDataApi, getTheadListApi, getTbodyDataApi } =
  store;
watch(
  [pageNo, pageSize],
  async () => {
    await getTbodyDataApi();
  },
  { immediate: false }
);
function getPopupContainer(trigger) {
  return trigger.parentElement.parentElement;
}
const previewVisible = ref(false);
function previewFormOpen(scope) {
  let obj = { ...scope.data.record };
  let classLv1Name = scope?.data?.record?.classLv1Name || "";
  let classLv2Name = scope?.data?.record?.classLv2Name || "";
  obj.className = classLv2Name
    ? classLv1Name + "-" + classLv2Name
    : classLv1Name;
  previewForm.value = { ...obj };
  previewVisible.value = true;
}
const indexTypeList = [
  {
    label: "组合指标",
    value: "1001",
  },
  {
    label: "分析指标",
    value: "1002",
  },
  {
    label: "综合管理指标",
    value: "1003",
  },
];
const dateTypeList = [
  {
    label: "日指标",
    value: "D",
  },
  {
    label: "月指标",
    value: "M",
  },
];
const visibleStyle = ref({
  display: "none",
  left: "0px",
  top: "0px",
});
function getkpiCycle(scope) {
  let text = "";
  if (scope.data.text === "D") {
    text = "日指标";
  } else if (scope.data.text === "M") {
    text = "月指标";
  }
  return text;
}
const visible = ref(false);
function onSearch() {
  if (pageNo.value === 1) {
    getTbodyDataApi();
  } else {
    pageNo.value = 1;
  }
}
function clickLeftDate(key) {
  if (key === kpiCycle.value) {
    kpiCycle.value = "";
  } else {
    kpiCycle.value = key;
  }
  kpiTypeCodeList.value = [];
  kpiCycleList.value = [];
  everyMonth.value = undefined;
  backEveryMonth.value = undefined;
  everyDay.value = null;
  backEveryDay.value = null;
  addDate.value = undefined;
  backKpiTypeCodeList.value = [];
  backKpiCycleList.value = [];
  backAddDate.value = undefined;
  searchName.value = "";
  if (pageNo.value === 1) {
    getTbodyDataApi();
  } else {
    pageNo.value = 1;
  }
}

function onSelect(selectedKeys) {
  selected.value = selectedKeys;
  kpiTypeCodeList.value = [];
  kpiCycleList.value = [];
  everyMonth.value = undefined;
  backEveryMonth.value = undefined;
  everyDay.value = null;
  backEveryDay.value = null;
  addDate.value = undefined;
  backKpiTypeCodeList.value = [];
  backKpiCycleList.value = [];
  backAddDate.value = undefined;
  searchName.value = "";
  if (pageNo.value === 1) {
    getTbodyDataApi();
  } else {
    pageNo.value = 1;
  }
}
const clickType = ref("");
function clickHeadEmit(e, key) {
  const x = e.pageX;
  const y = e.pageY;
  clickType.value = key;
  if (key === "kpiTypeName") {
    kpiTypeCodeList.value = [...backKpiTypeCodeList.value];
  } else if (key === "kpiCycle") {
    kpiCycleList.value = [...backKpiCycleList.value];
  } else if (key === "releaseTime") {
    everyMonth.value = backEveryMonth.value;
    everyDay.value = backEveryDay.value;
  } else if (key === "addDate") {
    addDate.value = backAddDate.value;
  }
  visibleStyle.value = {
    display: "block",
    left: x - 80 + "px",
    top: y + 15 + "px",
  };
}
function resetValue() {
  if (clickType.value === "kpiTypeName") {
    kpiTypeCodeList.value = [];
  } else if (clickType.value === "kpiCycle") {
    kpiCycleList.value = [];
  } else if (clickType.value === "releaseTime") {
    everyMonth.value = undefined;
    everyDay.value = null;
  } else if (clickType.value === "addDate") {
    addDate.value = undefined;
  }
}

function confirmValue() {
  visibleStyle.value = {
    display: "none",
    left: "0px",
    top: "0px",
  };
  if (pageNo.value === 1) {
    getTbodyDataApi();
  } else {
    pageNo.value = 1;
  }
}
function closeInfoModal() {
  visibleStyle.value = {
    display: "none",
    left: "0px",
    top: "0px",
  };
}

onMounted(async () => {
  await getTopDataApi();
  await getLeftTreeDataApi();
  await getTheadListApi();
  await getTbodyDataApi();
});
</script>

<style scoped lang="less">
.intent-mining-page {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 14px;
  color: #464c5b;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(250, 251, 255, 1) 0%,
    rgba(243, 245, 251, 1) 99%
  );
  position: relative;
  .visible {
    position: fixed;
    background-color: #fff;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    z-index: 10;
    min-width: 100px;
    border-radius: 5px;
    color: #000;
    padding: 10px;
    .close-btn {
      text-align: right;
    }
    .btn-close {
      cursor: pointer;
    }
    .btn-close:hover {
      background-color: rgba(133, 133, 135, 0.3);
    }
    .release-time {
      display: flex;
      flex-direction: column;
      gap: 20px;
      .input-class {
        width: 170px;
      }
    }
    .reset {
      display: flex;
      column-gap: 10px;
      padding-top: 10px;
      justify-content: flex-end;
      .btn1 {
        width: max-content;
        padding: 2px 15px;
        border-radius: 4px;
        cursor: pointer;
      }
      .btn2 {
        border: 1px #d9d9d9 solid;
      }
      .btn2:hover {
        color: #398dfa;
        border-color: #398dfa;
      }
      .btn3 {
        background-color: #2468f2;
        color: #fff;
      }
      .btn3:hover {
        background-color: #398dfa;
      }
    }
  }
  .search {
    width: 100%;
    margin: 15px 0;
    border-radius: 4px;
    padding: 10px;
    background-color: #fff;
    .head-top {
      display: flex;
      justify-content: space-between;
      .item {
        width: 40%;
        min-width: 250px;
        display: flex;
        font-size: 16px;
        justify-content: space-around;
        align-items: center;
        background: linear-gradient(to right, #f7fbff, #fbfcff);
        border-radius: 5px;
        img {
          width: 80px;
        }
        .num-total {
          font-size: 18px;
          font-weight: 700;
        }
      }
    }
  }
  .btn {
    flex: 1;
    display: flex;
    column-gap: 20px;
    overflow-x: hidden;
    .left-tree {
      flex: 1;
      height: 100%;
      min-width: 250px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      row-gap: 20px;
      overflow: hidden;
      .select-item {
        background-color: #fff;
        padding: 10px;
        border-radius: 5px;
      }
      .type-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .tree-content {
          flex: 1;
          overflow: auto;
          &::-webkit-scrollbar {
            width: 0.416667vw;
            height: 0.416667vw;
            background-color: #f8f8f8;
          }
          &::-webkit-scrollbar-thumb {
            border-radius: 0.333vw;
            box-shadow: inset 0 0 0.3125vw rgba(175, 175, 175, 0.3);
            background-color: #ebebeb;
          }
        }
      }
      .date-item {
        padding-bottom: 40px;
      }
      .date-list {
        font-size: 14px;
        margin-left: 20px;
        padding: 5px 10px 5px 5px;
        cursor: pointer;
        border-radius: 5px;
        width: max-content;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .date-list-selected {
        font-size: 14px;
        margin-left: 20px;
        padding: 5px 10px 5px 5px;
        cursor: pointer;
        border-radius: 5px;
        width: max-content;
        max-width: 180px;
        overflow: hidden;
        color: #fff;
        text-overflow: ellipsis;
        background-color: #2468f2;
      }
      .date-list:hover {
        background-color: #e6f4ff;
      }
    }
    .right-table {
      flex: 5;
      background-color: #fff;
      padding-top: 15px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      height: 100%;
      .input-search {
        align-self: flex-end;
        margin-right: 30px;
      }
    }
  }
}
.title {
  display: flex;
  width: 80%;
  position: relative;
  align-self: center;
  color: rgba(36, 104, 242, 1);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
  margin-left: 140px;
  border-bottom: 1px rgba(36, 104, 242, 1) solid;

  .iconTip {
    font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC",
      sans-serif;
    font-weight: 650;
    font-style: normal;
    font-size: 20px;
    color: #4e5969;
    text-align: center;
    width: 94%;
  }
  .img {
    margin-left: auto;
    color: #2f54eb;
    width: 28px;
    height: 26px;
  }
}
.head-title {
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 10px;
  img {
    width: 25px;
    margin-bottom: 1px;
    margin-right: 5px;
  }
  span {
    vertical-align: bottom;
  }
}
.head-title1 {
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 10px;
  img {
    width: 19px;
    margin-bottom: 2px;
    margin-right: 5px;
  }
  span {
    vertical-align: bottom;
  }
}
.head-title2 {
  font-size: 16px;
  font-weight: 700;
  padding-bottom: 10px;
  img {
    width: 22px;
    margin-bottom: 2px;
    margin-right: 5px;
  }
  span {
    vertical-align: bottom;
  }
}
.table-paging {
  background-color: #fff;
  padding: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
/deep/ .ant-tree.ant-tree-show-line li:not(:last-child)::before {
  border: none;
}
/deep/ .ant-tree-switcher.ant-tree-switcher-noop {
  display: none;
}
/deep/ .ant-tree-node-content-wrapper.ant-tree-node-content-wrapper-normal {
  text-indent: 2rem;
}
/deep/ .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected {
  background-color: #2468f2;
  color: #fff;
}
/deep/ .ant-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/deep/ .ant-checkbox-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 5px;
}
/deep/ .ant-checkbox-wrapper:hover {
  background-color: #e8f4ff;
  color: #2468f2;
}
/deep/ .ant-select-dropdown-menu {
  &::-webkit-scrollbar {
    width: 0.416667vw;
    height: 0.416667vw;
    background-color: #f8f8f8;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 0.333vw;
    box-shadow: inset 0 0 0.3125vw rgba(175, 175, 175, 0.3);
    background-color: #ebebeb;
  }
}
/deep/ .ant-time-picker-panel-select {
  &::-webkit-scrollbar {
    width: 0.416667vw;
    height: 0.416667vw;
    background-color: #f8f8f8;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 0.333vw;
    box-shadow: inset 0 0 0.3125vw rgba(175, 175, 175, 0.3);
    background-color: #e8e8e8;
  }
}
/deep/ .ant-modal-title {
  font-weight: 700;
}
</style>
